<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios常用配置以及默认配置</title>
  </head>
  <body>
    <button>战士</button>
    <button>法师</button>
    <!-- 
    接口: http://api.xiaohigh.com/lol  
    -->
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
  <script>
   
    axios.defaults.baseURL = 'http://api.xiaohigh.com' 
    axios.defaults.timeout = 2*1000 // 超时时间  一旦超时了请求就会报错
    let btns=document.querySelectorAll('button')
    btns[0].onclick=async function(){
      try{
        let response=await axios({
          // url:'http://api.xiaohigh.com/lol',
          url:'/lol',
          method:'get',
          params:{
            q:'战士'
          },
          headers:{
            name:'aaa'
          }
        })
        console.log(response)
        console.log(response.data)
      }
      catch(error){
        alert(error.message)
      }
    }
    btns[1].onclick=async function(){
      try{
        let response=await axios({
          // url:'http://api.xiaohigh.com/lol',
          url:'/lol',
          method:'get',
          params:{
            q:'法师'
          },
          headers:{
            name:'bbb'
          }
        })
        console.log(response)
      }
      catch(error){
        alert(error.message)
      }
    }
  </script>
</html>
